<template>
    <li>
        <label>
            <input type="checkbox" 
                :checked="todo.done" 
                @change="handleCheck(todo.id)"/>
            <!-- 如下代码也能实现功能，但是不推荐，因为修改了props，违反了props只读的原则 -->
            <!-- <input type="checkbox" :checked="todo.done" @change="handleCheck(todo.id)"/> -->
            <span v-show="!todo.isEdit">{{todo.title}}</span>
            <input 
                v-show="todo.isEdit" 
                type="text" 
                :value="todo.title" 
                @blur="handleBlur(todo,$event)"
                ref="inputTitle"
            >
        </label>
        <button class="btn btn-danger" @click="handleDelete(todo.id)">删除</button>
        <button 
            class="btn btn-edit" 
            @click="handleEdit(todo)"
            v-show="!todo.isEdit"
        >编辑</button>
    </li>
</template>

<script>
    import pubsub from "pubsub-js"

export default {
    name:"Item",
    methods:{
        handleCheck(id){
            //通知app组件将对应的todo对象的值取反
            // this.checkTodo(id);

            this.$bus.$emit("checkTodo",id);
        },
        handleDelete(id){
            if(confirm("确定删除吗")){
                // this.deleteTodo(id);
                // this.$bus.$emit("deleteTodo",id);
                pubsub.publish("deleteTodo",id);
            }
        },
        //编辑
        handleEdit(todo){
            if(todo.hasOwnProperty("isEdit")){
                todo.isEdit = true;
            }else{
                this.$set(todo,"isEdit",true);
            }
            //直接写this.$refs.inputTitle.focus();是没有用的，因为input还在隐藏阶段不能获取焦点
            //nextTick就是在下一次dom更新的时候修改
            this.$nextTick(function(){
                this.$refs.inputTitle.focus();
            })
        },
        //失去焦点回调，真正执行修改逻辑
        handleBlur(todo,e){
            todo.isEdit = false;
            if(e.target.value.trim() !== null){
                return alert("不能为空");
            }
            this.$bus.$emit("updateTodo", todo.id, e.target.value);
        }
    },
    //声明接受todo对象
    props:["todo"],
}
</script>

<style scoped>
    /*item*/
    li {
        list-style: none;
        height: 36px;
        line-height: 36px;
        padding: 0 5px;
        border-bottom: 1px solid #ddd;
    }

    li label {
        float: left;
        cursor: pointer;
    }

    li label li input {
        vertical-align: middle;
        margin-right: 6px;
        position: relative;
        top: -1px;
    }

    li button {
        float: right;
        display: none;
        margin-top: 3px;
    }

    li:before {
        content: initial;
    }

    li:last-child {
        border-bottom: none;
    }

    li:hover{
        background-color: skyblue;
    }

    li:hover button{
        display: block;
    }
</style>
